<template>
  <div class="task-list-item" @click="itemClick">
    <div class="task-title">
      {{ taskItem.dataContent }}
    </div>
    <div class="task-time-status">
      <span class="time">完成时限：{{ taskItem.completeTime }}</span>
      <span class="status" :class="taskItem.taskStatus">
        <van-icon name="clock-o" />
        {{ taskStatusObj[taskItem.taskStatus] }}
      </span>
    </div>
  </div>
</template>
<script>
import { taskStatusObj } from '../common/common'
export default {
  name: 'ListItem',
  components: {},
  props: {
    taskItem: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      taskStatusObj: taskStatusObj,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    itemClick() {
      this.$emit('itemClick', this.taskItem)
    },
  },
}
</script>
<style lang="scss" scoped>
.task-list-item {
  padding: px2rem(32);
  border-top: 1px solid #eee;
  .task-title {
    font-size: $fontSize30;
    color: #333;
    // font-weight: 600;
    @include ellipsis2(2);
  }
  .task-time-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: $fontSize26;
    color: #7f7f7f;
    margin-top: px2rem(20);
    .status {
      i {
        color: #c9c9c9;
        font-size: $fontSize28;
      }
      &.TASK_STATUS_1 {
        color: #ee0a24;
      }
      &.TASK_STATUS_2 {
        color: #07c160;
      }
    }
  }
}
</style>
